/**
 @Author:闻永明
 */ 
var MarkerLayer1 = [] //1号线路图层
var MarkerLayer2 = [] //2号线路图层
var MarkerLayer3 = [] //3号线路图层
var MarkerLayer4 = [] //4号线路图层
var MarkerLayer5 = [] //地铁站坐标点层
var MarkerData = null //地铁站坐标点数据
var path1 = []//1号线路坐标数据
var path2 = []//2号线路坐标数据
var path3 = []//3号线路坐标数据
var path4 = []//4号线路坐标数据

$(function() {
	MainLogic.init();
})
//地铁线路对象
var subwayLine = function(data, mlayer, color) {
	this.data = data;
	this.mlayer = mlayer;
	this.color = color
	this.init();
}
subwayLine.prototype = {
	init: function() {
		this.create();
		this.bindEvent();
	},
	create: function() {
		var polyline = null
		var polyline = new AMap.Polyline({
			path: this.data,
			strokeColor: this.color,
			strokeOpacity: 1,
			strokeWeight: 3,
			strokeStyle: "solid",
		});
		this.mlayer.push(polyline);
		map.add(this.mlayer)

	},
	bindEvent: function() {

	}
}
//地铁站点对象
var stationPoint = function(data, routeIndex) {
	this.data = data;
	this.maker = null;
	this.routeIndex = routeIndex;
	this.init();

}
stationPoint.prototype = {
	init: function() {
		this.create();
		this.bindEvent();
	},
	create: function() {
		var that = this
		if(this.routeIndex == 0) {
			$.each(this.data, function(index, value) {
				that.loadMaker(value);
			})
		} else {
			MarkerLayer5 = []
			$.each(this.data, function(index, value) {
				if(that.routeIndex == value.route) {
					that.loadMaker(value);
				}
			})
		}

		map.add(MarkerLayer5)
	},
	bindEvent: function() {
		var that = this
		$("#mapDiv").on('click', '#btnIn', function(e) {
			id = e.currentTarget.dataset.id
			$.get("http://159.75.66.230:8080/data/stationInTimeCount", {
				'station': id
			}, function(data) {
				var time = []
				var count = []
				$.each(data, function(index, value) {
					time.push(value.inStationTime)
					count.push(value.count)
				})
				$("#chartContainer").css({
					"display": "block"
				})
				that.lineChart(id + "入站口", time, count)

			})
		})
		$("#mapDiv").on('click', '#btnOut', function(e) {
			id = e.currentTarget.dataset.id
			$.get("http://159.75.66.230:8080/data/stationOutTimeCount", {
				'station': id
			}, function(data) {
				var time = []
				var count = []
				$.each(data, function(index, value) {
					time.push(value.outStationTime)
					count.push(value.count)
				})
				$("#chartContainer").css({
					"display": "block"
				})
				that.lineChart(id + "出站口", time, count)

			})
		})
	},
	lineChart: function(name, xData, yData) {
		var dom = document.getElementById("lineChart");
		var myChart = echarts.init(dom);
		var app = {};
		var option;
		option = {
			title: {
				text: '2019年12月-2020年7月地铁站' + name + '分时流量折线图',
				textStyle: {
					color: '#ffffff'
				},
			},
			tooltip: {
				trigger: 'axis'
			},
			grid: {
				left: '8%',
				right: '10%',
				bottom: '5%',
				top: '15%',
				containLabel: true
			},
			toolbox: {
				show: false,
				feature: {
					dataZoom: {
						yAxisIndex: 'none'
					},
					dataView: {
						readOnly: false
					},
					magicType: {
						type: ['line', 'bar']
					},
					restore: {},
					saveAsImage: {}
				}
			},
			xAxis: [{
				type: 'category',
				name: '时',
				data: xData,
				axisLabel: {
					textStyle: {
						color: '#ffffff'
					},
					lineStyle: {
						color: '#979797'

					},
					nameTextStyle: {
						color: '#fff'
					}

				}

			}],
			yAxis: {
				type: 'value',
				name: '人/次',
				axisLabel: {
					textStyle: {
						color: '#ffffff'
					},
					lineStyle: {
						color: '#979797'

					},
					nameTextStyle: {
						color: '#fff'
					}

				}
			},
			series: [{
				type: 'line',
				itemStyle: {
					normal: {
						color: "#0079FE",
						lineStyle: {
							color: '#0079FE'
						}
					}
				},
				lineWidth: 100,
				data: yData,

			}]
		};

		if(option && typeof option === 'object') {
			myChart.setOption(option);
		}
	},
	loadMaker: function(data) {
		this.maker = new AMap.Marker({
			position: new AMap.LngLat(data.coordinate.split()[0].split(",")[0], data.coordinate.split()[0].split(",")[1])
		});
		this.maker.setExtData({
			stationId: data.stationId,
			coordinate: data.coordinate,
			route: data.route
		})
		this.maker.on('click', function(ev) {
			var rawData = ev.target.getExtData();
			var originalEvent = ev.originEvent;
			var Content = "";
			Content += "<div id='info'>"
			Content += "<ul>"
			Content += "<li>"
			Content += "<span>站点名称:地铁站" + rawData.stationId + "</span>"
			Content += "<span></span>"
			Content += "</li>"
			Content += "<li>"
			Content += "<span>所属线路:" + rawData.route + "号线</span>"
			Content += "<span></span>"
			Content += "</li>"
			Content += "<li>"
			Content += "<span>站点坐标:" + rawData.coordinate + "</span>"
			Content += "<span></span>"
			Content += "</li>"
			Content += "<li>"
			Content += "<button data-id=" + rawData.stationId + " id='btnIn' class='layui-btn'>入站流量图</button>"
			Content += "<button data-id=" + rawData.stationId + " id='btnOut' class='layui-btn'>出站流量图</button>"
			Content += "</li>"
			Content += "</ul>"
			Content += "</div>"
			InfoWin = new AMap.InfoWindow({
				anchor: 'bottom-left',
				content: Content,
				offset: new AMap.Pixel(8, -8),
				closeWhenClickMap: true
			});
			var x = originalEvent.x;

			var y = originalEvent.y;
			var lngLat = map.containerToLngLat(new AMap.Pixel(x, y));
			InfoWin.open(map, lngLat);
		});
		MarkerLayer5.push(this.maker);
	}

}
//页面主要逻辑
var MainLogic = {
	init: function() {
		this.bindEvent();
		this.initPage();
	},
	//初始化平台
	initPage: function() {
		map = new AMap.Map('mapDiv', {
			mapStyle: 'amap://styles/02912d0f95ff367eabf7249523e6f12e',
			pitch: 66,
			zoom: 12,
			center: [114.323862,30.603024],
			viewMode: '2D'
		});
		this.events.loadPath()
		this.events.getRealTimeWeather()
		this.events.loadPoint()
		setInterval(this.events.getTime, 1000)
	},
	//绑定事件
	bindEvent: function() {
		var that = this
		$("#overview li").click(function(e) {
			$("#chartContainer").css({"display":"none"})
			$("#info").css({"display":"none"})
			$(this).children('a').css({
				"backgroundImage": "url('../img/btn_active.png')",
				"color":"RGBA(255, 195, 0, 1)"
			})
			$(this).siblings().children('a').css({
				"backgroundImage": "url('../img/btn.png')",
				"color":"#AAE9FF"
			})
			var index = $(this).index()
			$.get("http://159.75.66.230:8080/coordinateRoute/stationCoordinateRoute", function(data) {
				MarkerData = data
				new stationPoint(MarkerData, index);
			})
			switch(index) {
				case 0:
					window.location.reload();

				case 1:
					map.remove(MarkerLayer1);
					map.remove(MarkerLayer2);
					map.remove(MarkerLayer3);
					map.remove(MarkerLayer4);
					map.remove(MarkerLayer5);
					new subwayLine(path1, MarkerLayer1, "#CC0000");
					break;
				case 2:
					map.remove(MarkerLayer1);
					map.remove(MarkerLayer2);
					map.remove(MarkerLayer3);
					map.remove(MarkerLayer4);
					map.remove(MarkerLayer5);
					new subwayLine(path2, MarkerLayer2, "#793E8C");
					break;
				case 3:
					map.remove(MarkerLayer1);
					map.remove(MarkerLayer2);
					map.remove(MarkerLayer3);
					map.remove(MarkerLayer4);
					map.remove(MarkerLayer5);
					new subwayLine(path3, MarkerLayer3, "#FCD600");
					break;
				case 4:
					map.remove(MarkerLayer1);
					map.remove(MarkerLayer2);
					map.remove(MarkerLayer3);
					map.remove(MarkerLayer4);
					map.remove(MarkerLayer5);
					new subwayLine(path4, MarkerLayer4, "#CC0000");
					break;

			}
		})
	},
	//事件
	events: {
		loadPath: function() {
			$.get("http://159.75.66.230:8080/coordinateRoute/routeStation", function(data) {
				$.each(data, function(index, value) {
					if(value.route == 1) {
						$.each(value.stations, function(index, value) {
							path1.push(value.coordinate.split()[0].split(","))
						})
						new subwayLine(path1, MarkerLayer1, "#B35A1F");
					} else if(value.route == 2) {
						$.each(value.stations, function(index, value) {
							path2.push(value.coordinate.split()[0].split(","))
						})
						new subwayLine(path2, MarkerLayer2, "#793E8C");
					} else if(value.route == 3) {
						$.each(value.stations, function(index, value) {
							path3.push(value.coordinate.split()[0].split(","))
						})
						new subwayLine(path3, MarkerLayer3, "#FCD600");
					} else if(value.route == 4) {
						$.each(value.stations, function(index, value) {
							path4.push(value.coordinate.split()[0].split(","))
						})
						new subwayLine(path4, MarkerLayer4, "#CC0000");
					}

				});
			
			})
		},

		loadPoint: function() {
			$.get("http://159.75.66.230:8080/coordinateRoute/stationCoordinateRoute", function(data) {
				MarkerData = data
				new stationPoint(MarkerData,0);
			})

		},
		getRealTimeWeather: function() {
			$.ajax({
				type: "Get",
				url: 'https://devapi.heweather.net/v7/weather/now?location=121.4012,31.0449&key=264c2c30f0604b3daea3c91ca4cb79b7',
				dataType: "json",
				async: false,
				success: function(res) {
					var tubiao = 'img/weather/' + res.now.icon + '.png'
					$(".num").text('气温:' + res.now.temp + '℃');
					$(".time img").attr({
						src: tubiao
					})
				}
			});
		},
		getTime: function() {
			var date = new Date();
			var year = date.getFullYear();
			var mon = (date.getMonth() + 1) >= 10 ? (date.getMonth() + 1) : '0' + (date.getMonth() + 1);
			var da = date.getDate() >= 10 ? date.getDate() : '0' + date.getDate();
			var h = date.getHours() >= 10 ? (date.getHours()) : '0' + date.getHours();
			var m = date.getMinutes() >= 10 ? date.getMinutes() : '0' + date.getMinutes();
			var s = date.getSeconds() >= 10 ? date.getSeconds() : '0' + date.getSeconds();
			var d = document.getElementById('Timer');
			d.innerHTML = year + '年' + mon + '月' + da + '日' + ' ' + h + ':' + m + ':' + s;
		}
	},
}